﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0058)http://www.sohtanaka.com/web-design/examples/footer-panel/ -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Facebook Style Footer Admin Panel w/ CSS & jQuery- Tutorial by Soh Tanaka</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>


<STYLE type=text/css>BODY {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 10px normal Verdana, Arial, Helvetica, sans-serif; BACKGROUND: url(background.gif) #7f7f7f no-repeat center top; HEIGHT: 100%; PADDING-TOP: 0px
}
* {
	PADDING-BOTTOM: 0px; MARGIN: 0px; OUTLINE-STYLE: none; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
IMG {
	BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-LEFT-STYLE: none
}
H1 {
	PADDING-BOTTOM: 5px; MARGIN: 0px auto; PADDING-LEFT: 10px; WIDTH: 940px; PADDING-RIGHT: 10px; COLOR: #ccc; FONT-SIZE: 1.2em; PADDING-TOP: 5px
}
H1 A {
	COLOR: #fff
}
H1 SPAN {
	FONT-WEIGHT: normal
}
#footpanel {
	Z-INDEX: 9999; BORDER-BOTTOM: #c3c3c3 1px; POSITION: fixed; BORDER-LEFT: #c3c3c3 1px solid; MARGIN: 0px 3%; WIDTH: 94%; BOTTOM: 0px; BACKGROUND: #e3e2e2; BORDER-TOP: #c3c3c3 1px solid; BORDER-RIGHT: #c3c3c3 1px solid; LEFT: 0px
}
* HTML #footpanel {
	POSITION: absolute; MARGIN-TOP: -1px; ; TOP: expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight))
}
#footpanel UL {
	PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FLOAT: left; FONT-SIZE: 1.1em; BORDER-TOP: #fff 1px solid; PADDING-TOP: 0px
}
#footpanel UL LI {
	POSITION: relative; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FLOAT: left; PADDING-TOP: 0px
}
#footpanel UL LI A {
	POSITION: relative; PADDING-BOTTOM: 5px; TEXT-INDENT: -9999px; PADDING-LEFT: 5px; WIDTH: 16px; PADDING-RIGHT: 5px; FLOAT: left; HEIGHT: 16px; COLOR: #333; TEXT-DECORATION: none; PADDING-TOP: 5px
}
HTML #footpanel UL LI A:hover {
	BACKGROUND-COLOR: #fff
}
HTML #footpanel UL LI A.active {
	Z-INDEX: 200; BORDER-BOTTOM: #555 1px solid; POSITION: relative; BORDER-LEFT: #555 1px solid; BACKGROUND-COLOR: #fff; MARGIN-TOP: -2px; HEIGHT: 17px; BORDER-TOP: #555 1px; BORDER-RIGHT: #555 1px solid
}
#footpanel A.home {
	TEXT-INDENT: 0px; PADDING-LEFT: 40px; WIDTH: 50px; BACKGROUND: url(home.png) no-repeat 15px center; BORDER-RIGHT: #bbb 1px solid
}
A.profile {
	BACKGROUND: url(user.png) no-repeat center center
}
A.contacts {
	BACKGROUND: url(address_book.png) no-repeat center center
}
A.playlist {
	BACKGROUND: url(document_music_playlist.png) no-repeat center center
}
A.videos {
	BACKGROUND: url(film.png) no-repeat center center
}
A.messages {
	BACKGROUND: url(mail.png) no-repeat center center
}
A.editprofile {
	BACKGROUND: url(wrench_screwdriver.png) no-repeat center center
}
#footpanel A.chat {
	BORDER-LEFT: #bbb 1px solid; TEXT-INDENT: 0px; PADDING-LEFT: 40px; WIDTH: 126px; BACKGROUND: url(balloon.png) no-repeat 15px center; BORDER-RIGHT: #bbb 1px solid
}
A.alerts {
	BACKGROUND: url(newspaper.png) no-repeat center center
}
#footpanel LI#chatpanel {
	FLOAT: right
}
#footpanel LI#alertpanel {
	FLOAT: right
}
#footpanel A SMALL {
	TEXT-ALIGN: center; PADDING-BOTTOM: 11px; TEXT-INDENT: 0px; PADDING-LEFT: 5px; WIDTH: 70px; PADDING-RIGHT: 5px; DISPLAY: none; BACKGROUND: url(pop_arrow.gif) no-repeat center bottom; COLOR: #fff; FONT-SIZE: 1em; PADDING-TOP: 5px
}
#footpanel A:hover SMALL {
	Z-INDEX: 9999; POSITION: absolute; DISPLAY: block; MARGIN-LEFT: -40px; TOP: -35px; LEFT: 50%
}
#footpanel UL LI DIV A {
	POSITION: static; PADDING-BOTTOM: 0px; TEXT-INDENT: 0px; PADDING-LEFT: 0px; WIDTH: auto; PADDING-RIGHT: 0px; FLOAT: none; HEIGHT: auto; COLOR: #00629a; PADDING-TOP: 0px
}
#footpanel UL LI DIV A:hover {
	TEXT-DECORATION: underline
}
#footpanel .subpanel {
	BORDER-BOTTOM: #555 1px solid; POSITION: absolute; BORDER-LEFT: #555 1px solid; PADDING-BOTTOM: 2px; WIDTH: 198px; BOTTOM: 27px; DISPLAY: none; BACKGROUND: #fff; OVERFLOW: hidden; BORDER-TOP: #555 1px solid; BORDER-RIGHT: #555 1px solid; LEFT: 0px
}
#footpanel H3 {
	PADDING-BOTTOM: 5px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: #526ea6; COLOR: #fff; FONT-SIZE: 1.1em; CURSOR: pointer; PADDING-TOP: 5px
}
#footpanel H3 SPAN {
	LINE-HEIGHT: 0.6em; FLOAT: right; FONT-SIZE: 1.5em; FONT-WEIGHT: normal
}
#footpanel .subpanel UL {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; BACKGROUND: #fff; OVERFLOW: auto; PADDING-TOP: 0px
}
#footpanel .subpanel LI {
	POSITION: static; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND: #fff; FLOAT: none; CLEAR: both; FONT-SIZE: 0.9em; OVERFLOW: hidden; PADDING-TOP: 0px
}
#chatpanel .subpanel LI {
	BACKGROUND: url(dash.gif) repeat-x left center
}
#chatpanel .subpanel LI SPAN {
	PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: #fff; FLOAT: left; COLOR: #777; PADDING-TOP: 5px
}
#chatpanel .subpanel LI A IMG {
	MARGIN: 0px 5px; FLOAT: left
}
#chatpanel .subpanel LI A {
	PADDING-BOTTOM: 3px; LINE-HEIGHT: 22px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND: #fff; HEIGHT: 22px; PADDING-TOP: 3px
}
#chatpanel .subpanel LI A:hover {
	BACKGROUND: #3b5998; COLOR: #fff; TEXT-DECORATION: none
}
#alertpanel .subpanel {
	RIGHT: 0px; LEFT: auto
}
#alertpanel .subpanel LI {
	DISPLAY: block; BORDER-TOP: #f0f0f0 1px solid
}
#alertpanel .subpanel LI P {
	PADDING-BOTTOM: 5px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 5px
}
#alertpanel .subpanel LI A.delete {
	TEXT-INDENT: -9999px; MARGIN: 5px; WIDTH: 13px; BACKGROUND: url(delete_x.gif) no-repeat; FLOAT: right; HEIGHT: 14px; VISIBILITY: hidden
}
#alertpanel .subpanel LI A.delete:hover {
	BACKGROUND-POSITION: left bottom
}
#footpanel #alertpanel LI.view {
	TEXT-ALIGN: right; PADDING-BOTTOM: 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 10px; PADDING-TOP: 5px
}
</STYLE>

<SCRIPT type=text/javascript 
src="Facebook%20Style%20Footer%20Admin%20Panel_files/jquery-1.3.2.min.js"></SCRIPT>

<SCRIPT type=text/javascript> 
$(document).ready(function(){

	//Adjust panel height
	$.fn.adjustPanel = function(){ 
		$(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset subpanel and ul height
		
		var windowHeight = $(window).height(); //Get the height of the browser viewport
		var panelsub = $(this).find(".subpanel").height(); //Get the height of subpanel	
		var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of subpanel)
		var ulAdjust =  panelAdjust - 25; //Calculate ul size after adjusting sub-panel (27px is the height of the base panel)
		
		if ( panelsub >= panelAdjust ) {	 //If subpanel is taller than max height...
			$(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust subpanel to max height
			$(this).find("ul").css({ 'height' : ulAdjust}); //Adjust subpanel ul to new size
		}
		else if ( panelsub < panelAdjust ) { //If subpanel is smaller than max height...
			$(this).find("ul").css({ 'height' : 'auto'}); //Set subpanel ul to auto (default size)
		}
	};
	
	//Execute function on load
	$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel
	$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel
	
	//Each time the viewport is adjusted/resized, execute the function
	$(window).resize(function () { 
		$("#chatpanel").adjustPanel();
		$("#alertpanel").adjustPanel();
	});
	
	//Click event on Chat Panel + Alert Panel	
	$("#chatpanel a:first, #alertpanel a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel...
		if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...
			$(this).next(".subpanel").hide(); //Hide active subpanel
			$("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger
		}
		else { //if subpanel is not active...
			$(".subpanel").hide(); //Hide all subpanels
			$(this).next(".subpanel").toggle(); //Toggle the subpanel to make active
			$("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger
			$(this).toggleClass('active'); //Toggle the active class on the subpanel trigger
		}
		return false; //Prevent browser jump to link anchor
	});
	
	//Click event outside of subpanel
	$(document).click(function() { //Click anywhere and...
		$(".subpanel").hide(); //hide subpanel
		$("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger
	});
	$('.subpanel ul').click(function(e) { 
		e.stopPropagation(); //Prevents the subpanel ul from closing on click
	});
	
	//Delete icons on Alert Panel
	$("#alertpanel li").hover(function() {
		$(this).find("a.delete").css({'visibility': 'visible'}); //Show delete icon on hover
	},function() {
		$(this).find("a.delete").css({'visibility': 'hidden'}); //Hide delete icon on hover out
	});





	
});
</SCRIPT>

<META name=GENERATOR content="MSHTML 8.00.6001.18876"></HEAD>
<BODY>
<H1><A 
href="http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/">Facebook 
Style Footer Admin Panel w/ CSS &amp; jQuery- <SPAN>Tutorial by <A 
href="http://www.sohtanaka.com/">Soh Tanaka</A></SPAN></H1>
<DIV id=footpanel>
<UL id=mainpanel>
  <LI><A class=home href="http://www.designbombs.com/">Inspiration <SMALL>Design 
  Bombs</SMALL></A> </LI>
  <LI><A class=profile href="http://www.designbombs.com/">View Profile 
  <SMALL>View Profile</SMALL></A> </LI>
  <LI><A class=editprofile href="http://www.designbombs.com/">Edit Profile 
  <SMALL>Edit Profile</SMALL></A> </LI>
  <LI><A class=contacts href="http://www.designbombs.com/">Contacts 
  <SMALL>Contacts</SMALL></A> </LI>
  <LI><A class=messages href="http://www.designbombs.com/">Messages (10) 
  <SMALL>Messages</SMALL></A> </LI>
  <LI><A class=playlist href="http://www.designbombs.com/">Play List <SMALL>Play 
  List</SMALL></A> </LI>
  <LI><A class=videos href="http://www.designbombs.com/">Videos 
  <SMALL>Videos</SMALL></A> </LI>
  <LI id=alertpanel><A class=alerts 
  href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">Alerts</A> 
  <DIV class=subpanel>
  <H3><SPAN>– </SPAN>Notifications</H3>
  <UL>
    <LI class=view><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">View 
    All</A> </LI>
    <LI><A class=delete 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">X</A>
    <P><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">Antehabeo</A> 
    abico quod duis odio tation luctus eu ad <A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">lobortis 
    facilisis</A>.</P></LI>
    <LI><A class=delete 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">X</A>
    <P><A href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">Et 
    voco </A>Duis vel quis at metuo obruo, turpis quadrum nostrud <A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">lobortis 
    facilisis</A>.</P></LI>
    <LI><A class=delete 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">X</A>
    <P><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">Tego</A> 
    nulla eum probo metuo nullus indoles os consequat commoveo os<A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">lobortis 
    facilisis</A>.</P></LI>
    <LI><A class=delete 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">X</A>
    <P><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">Antehabeo</A> 
    abico quod duis odio tation luctus eu ad <A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">lobortis 
    facilisis</A>.</P></LI>
    <LI><A class=delete 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">X</A>
    <P><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">Nonummy</A> 
    nulla eum probo metuo nullus indoles os consequat commoveo <A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">lobortis 
    facilisis</A>.</P></LI>
    <LI><A class=delete 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">X</A>
    <P><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">Tego</A> 
    minim autem aptent et jumentum metuo uxor nibh euismod si <A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">lobortis 
    facilisis</A>.</P></LI>
    <LI><A class=delete 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">X</A>
    <P><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">Antehabeo</A> 
    abico quod duis odio tation luctus eu ad <A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">lobortis 
    facilisis</A>.</P></LI></UL></DIV></LI>
  <LI id=chatpanel><A class=chat 
  href="http://www.sohtanaka.com/web-design/examples/footer-panel/#">Friends 
  (<STRONG>18</STRONG>) </A>
  <DIV class=subpanel>
  <H3><SPAN>– </SPAN>Friends Online</H3>
  <UL>
    <LI><SPAN>Family Members</SPAN> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><SPAN>Other Friends</SPAN> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI>
    <LI><A 
    href="http://www.sohtanaka.com/web-design/examples/footer-panel/#"><IMG 
    alt="" src="Facebook%20Style%20Footer%20Admin%20Panel_files/chat-thumb.gif"> 
    Your Friend</A> </LI></UL></DIV></LI></UL></DIV></BODY></HTML>
